<template>
  <vxe-toolbar v-if="showToolbar" custom ref="toolbarRef">
    <template #buttonPrefix>
      <slot name="toolbar"></slot>
    </template>
    <template #toolPrefix>
      <right-toolbar v-model:showSearch="showSearchLocal" @query-table="getListData" :search="search"></right-toolbar>
    </template>
  </vxe-toolbar>
  <vxe-table
    :sort-config="{ remote: true }"
    @sort-change="sortChangeEvent"
    :row-config="{ keyField: 'id' }"
    :id="id"
    :loading="tableLoading"
    :checkbox-config="{ labelField: 'name' }"
    :scroll-y="{ enabled: true }"
    :tree-config="treeConfig"
    :column-config="{ resizable: true }"
    header-align="left"
    :data="tableList"
    :height="height"
    :header-cell-config="{ height: 30, padding: true }"
    :align="align"
    :size="size"
    ref="tableRef"
    @checkbox-change="handleSelectChange"
    @row-click="handleRowClick"
    row-class-name="home-service-work-no-row"
    :edit-config="editConfig"
    keep-source
    :customConfig="customConfig"
    :footer-data="footerData"
    :show-footer="showFooter"
    @cell-dblclick="cellDBLClickEvent"
    stripe
    @checkbox-all="handleAllSelectChange"
  >
    <!-- 序号列 -->
    <vxe-column v-if="seq" type="seq" title="序号" width="60" />
    <!-- 单选框 -->
    <vxe-column v-if="showRadio" type="radio" width="40"></vxe-column>
    <!-- 复选框 -->
    <vxe-column v-if="showSelection" type="checkbox" align="left" width="25" :fixed="actionFixed" show-overflow></vxe-column>
    <!-- 动态列 -->
    <template v-for="column in columns" :key="column.field">
      <vxe-column
        :field="column.field"
        :tree-node="column.treeNode"
        v-if="column.show !== false"
        :title="column.title"
        :fixed="column.fixed || undefined"
        :min-width="column.minWidth || 80"
        :width="column.width || undefined"
        :max-width="column.maxWidth || 100"
        :sortable="column.sortable"
        :edit-render="column.editRender || undefined"
        :show-overflow="column.overflow || false"
        :align="column.align || 'left'"
        show-header-overflow
      >
        <!-- 自定义表头 -->
        <template #header>
          <slot :name="column.field + 'Header'" :column="column">
            {{ column.title }}
          </slot>
        </template>
        <!-- 自定义插槽 -->
        <template #default="{ row, column }">
          <slot :name="column.field" :row="row">
            {{ row[column.field] }}
          </slot>
        </template>
      </vxe-column>
    </template>
    <!-- 操作列 -->
    <vxe-column align="left" :min-width="actionWidth" field="action" v-if="showAction" title="操作" fixed="right">
      <template #default="{ row }">
        <slot name="action" :row="row"></slot>
      </template>
    </vxe-column>
  </vxe-table>
  <!-- 分页 -->
  <vxe-pager
    size="mini"
    v-model:currentPage="queryParams.pageNum"
    v-model:pageSize="queryParams.pageSize"
    :total="total"
    :layouts="['Home', 'PrevJump', 'PrevPage', 'Number', 'NextPage', 'NextJump', 'End', 'Sizes', 'FullJump', 'Total']"
    @page-change="getListData"
  >
  </vxe-pager>
</template>

<script setup>
import { useVxeCustomConfig } from '@/hooks/useVxeCustomConfig';
const emit = defineEmits(['pagination', 'rowClick', 'selectChange', 'view', 'update:showSearch', 'cellClick', 'selectChangeAll', 'sort']);
const { proxy } = getCurrentInstance();
const props = defineProps({
  tableList: { type: Array, default: () => [] },
  tableLoading: { type: Boolean, default: false },
  columns: { type: Array, default: () => [] },
  height: { type: [String, Number], default: 400 },
  size: { type: String, default: 'mini' },
  total: { type: Number, default: 0 },
  queryParams: { type: Object, default: () => ({ pageNum: 1, pageSize: 20 }) },
  showSelection: { type: Boolean, default: false }, // 是否显示多选框
  showAction: { type: Boolean, default: true }, // 是否显示操作列
  showToolbar: { type: Boolean, default: false }, // 是否显示工具栏
  showSearch: { type: Boolean, default: false }, // 搜索栏开关
  search: { type: Boolean, default: true },
  showRadio: { type: Boolean, default: false },
  treeConfig: { type: Object, default: null }, // 树形配置
  customConfig: { type: Object, default: () => null },
  id: { type: String, default: '' },
  align: { type: String, default: 'left' },
  actionWidth: { type: [Number, String], default: 30 },
  checkboxWidth: { type: Number, default: 40 },
  width: { type: [String, Number], default: undefined },
  actionFixed: { type: String, default: 'left' },
  seq: { type: Boolean, default: false },
  editConfig: { type: Object, default: () => ({ trigger: 'manual', mode: 'row', autoClear: false }) },
  fieldExcludeList: { type: Array, default: () => [] },
  showFooter: { type: Boolean, default: false },
  footerData: { type: Array, default: () => [] }
});
const { customConfig } = useVxeCustomConfig(props.id, props.fieldExcludeList, proxy?.$modal);
// 创建本地 `showSearch`，默认取 `props.showSearch` 的值
const showSearchLocal = ref(props.showSearch);

// 监听 `showSearchLocal` 变化，并通知父组件更新
watch(showSearchLocal, (newValue) => {
  emit('update:showSearch', newValue);
});
const tableRef = ref();
const toolbarRef = ref();
// 分页查询
const getListData = () => emit('pagination');

// 行点击事件
const handleRowClick = (row) => emit('rowClick', row);

// 多选变更事件
const handleSelectChange = (selection) => emit('selectChange', selection);

// 全选按钮事件
const handleAllSelectChange = (selection) => emit('selectChangeAll', selection);
// 单元格cell点击事件
const cellDBLClickEvent = (row) => emit('cellClick', row);
// 触发查看详情
const handleView = (row) => emit('view', row);
onMounted(() => {
  const $table = tableRef.value;
  const $toolbar = toolbarRef.value;
  if ($table && $toolbar) {
    $table.connect($toolbar);
  }
});
defineExpose({
  tableRef // 暴露 tableRef 供父组件访问
});
// const rowStyle = ({ row, column }) => {
// 	if (column.field === 'estimatedTimeAtArrival' && row.arrivalStatus) {
// 		return {
// 			backgroundColor: '#f2a4a4',
// 			color: '#fff'
// 		}
// 	}
// }
// 排序
const sortChangeEvent = ({ field, order }) => {
  emit('sort', field, order);
};
</script>

<style lang="scss" scoped>
:deep(.vxe-cell--checkbox > .vxe-checkbox--label) {
  display: none !important;
}
</style>
